<!--
 * @Description: 意见区元组件
-->
<template>
  <div class="opinion-area comment-component opinion">
    <div class="comment-header">
      {{ $i18n('collaboration.opinion.handleOpinion', data.commentTotal, data.praiseTotal) }}
    </div>
    <ul class="comment-list">
      <li v-for="item in data.comments" :key="item.id">
        <div class="attitude" :class="[item.extAtt4]">
          <icon-font :type="getIcon(item.extAtt4)" />
        </div>
        <div class="author-header">
          <div>
            <img
              @click="showBaseInfo(item.createId)"
              icon="user"
              :src="item.avatarImageUrl"
              @mouseover.once="
                item.avatarImageUrl = item.avatarImageUrl.replace('igonregif=0', 'igonregif=1')
              "
            />

            <span class="author-name" @click="showBaseInfo(item.createId)">{{
              item.createName
            }}</span>
            <span v-if="item.departmentFullName" class="small-gray-text">{{ item.departmentName }}</span>
            <b v-if="item.extAtt1I18n">{{ item.extAtt1I18n }}</b>
            <b v-if="item.extAtt3I18n && item.extAtt3 !== 'collaboration.dealAttitude.repeat.auto.skip'">{{ item.extAtt3I18n }}</b>
            <b v-if="item.extAtt2" class="color-danger">{{
              $i18n('collaboration.agent.label', item.extAtt2)
            }}</b>
            <a-popover v-if="item.hasWfOperation">
              <template slot="content">
                <p v-for="(log, index) in item.processLogs" :key="index">{{ log }}</p>
              </template>
              <div class="comment-log"
                ><icon-font type="sy-file" />
                {{ $i18n('collaboration.summary.label.dealLog') }}</div
              >
            </a-popover>
          </div>
          <div>
            <span
              class="comment-praise"
              :class="canReply ? 'cursor-pointer' : 'disabled'"
              @click="handleLike(item)"
              ><i
                class="syIcon"
                :class="[item.praiseToComment ? 'sy-praise-fill' : 'sy-praise']"
              ></i
              ><span>({{ item.praiseNumber }})</span></span
            >
            <span
              @click="item.commentSubmitParams = item"
              class="comment-reply"
              v-if="canReply && !item.readOnly"
              >{{ $i18n('cap4.bind.label.reply') }}</span
            >

            <div v-if="item.praiseToSummary" class="syIcon sy-praise-fill"></div>
          </div>
        </div>
        <div class="comment-content">
          <p v-if="item.canView" v-html="item.escapedContent"></p>
          <span v-else>[{{ $i18n('common.display.hidden.label') }}]</span>
          <AccessoryList
            :attachments="item.attFileDomain"
            :relationDocs="item.assDocDomain"
            :areaName="getDocArea(item)"
          />
          <div class="small-gray-text">
            <span class="create-date">{{
              getDateString(item.createDateStr || item.createDate)
            }}</span
            >{{ item.m1Info }}</div
          >
          <ul class="reply-wrapper" v-if="item.children && item.children.length">
            <li v-for="d in item.children" :key="d.id">
              <div class="reply-author-header">
                <span class="author-name" @click="showBaseInfo(d.createId)">{{
                  d.createName
                }}</span>
                <span class="small-gray-text">{{
                  getDateString(d.createDateStr || d.createDate)
                }}</span></div
              >
              <div>
                <template v-if="d.canView"
                  ><span class="small-gray-text">{{
                    $i18n('collaboration.opinion.reply.to', d.replyToName)
                  }}</span
                  ><span v-html="d.escapedContent"></span
                ></template>
                <span v-else>[{{ $i18n('common.display.hidden.label') }}]</span>
                <span
                  class="comment-reply"
                  @click="item.commentSubmitParams = d"
                  v-if="canReply && !d.readOnly"
                  >{{ $i18n('cap4.bind.label.reply') }}</span
                >
                <p class="small-gray-text">{{ d.m1Info }}</p>
              </div>
              <AccessoryList
                :attachments="d.attFileDomain"
                :relationDocs="d.assDocDomain"
                :areaName="getDocArea(d)"
              />
            </li>
          </ul>
        </div>
        <TextareaComment
          @addReply="(reply) => addReply(item, reply)"
          @close="item.commentSubmitParams = false"
          v-if="item.commentSubmitParams"
          :item="item.commentSubmitParams"
          :rootId="item.id"
          :pushPeopleList="pushPeopleList"
          :isSetSecretLevel="isSetSecretLevel"
          @selectedDoc="(dataList) => (item.commentSubmitParams.relationDocs = dataList)"
          :placeholder="
            $i18n(
              'collaboration.opinion.reply.to',
              item.commentSubmitParams && item.commentSubmitParams.createName
            )
          "
        />
      </li>
    </ul>
  </div>
</template>
<script>
  //引入新增附言输入框
  import TextareaComment from '@/components/textarea-comment';
  //引入附件、关联列表集合
  import AccessoryList from '@/components/accessory-list';
  import globalMethods from '@/plugins/methods';
  import api from '@/api';
  import {showBaseInfo} from "@/helper/people-card";

  export default {
    name: 'BaseComment',
    components: { TextareaComment, AccessoryList },
    props: {
      data: {
        type: Object,
      },
      canReply: {
        // 是否能回复
        type: Boolean,
        default: true,
      },
      pushPeopleList: {
        type: Array,
      },
      isSetSecretLevel: {
        type: Boolean,
      },
    },
    created() {
      this.showBaseInfo = showBaseInfo;
      this.getDateString = globalMethods.getDateString;
    },
    methods: {
      /**
       * @description: 根据态度获取图表
       * @return {String}attitude 态度
       */
      getIcon(attitude) {
        switch (attitude) {
          case 'agree':
            return 'sy-hook-plane';
          case 'disagree':
            return 'sy-delete-x';
          default:
            return 'sy-read';
        }
      },
      /**
       * @description: 点赞、取消点赞
       * @param {Object}item 当前点赞项信息
       */
      async handleLike(item) {
        //能点赞才能点击
        const { praiseToComment, id } = item;
        //调接口
        if (await api.commentPraise(id, praiseToComment)) {
          //点赞了就取消
          if (praiseToComment) {
            item.praiseToComment = false;
            this.$emit('praiseTotalAdd', -1);
            item.praiseNumber--;
          } else {
            //否则点赞
            item.praiseToComment = true;
            this.$emit('praiseTotalAdd', 1);
            item.praiseNumber++;
          }
        }
      },
      /**
       * @description: 返回文件区域
       * @param {Object}item 当前评论对象
       * @return {String}区域
       */
      getDocArea(item) {
        return `reply-${item.id}-create`;
      },
      /**
       * @description: 回复成功之后，手动添加回复
       * @param {Object}item 当前这条评论对象
       * @param {Object}reply 回复成功的数据
       * @return {*}
       */

      addReply(item, reply) {
        item.children.push(reply);
        item.commentSubmitParams = false;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .opinion-area {
    .comment-reply {
      font-size: 12px;
      color: $c9;
      cursor: pointer;

      &:hover {
        color: $primary-color;
      }
    }

    .small-gray-text {
      font-size: 12px;
      color: $c9;
    }

    .sy-praise-fill {
      color: $primary-color;
    }

    > .comment-header {
      margin-bottom: 8px;
    }

    > .comment-list {
      padding-right: 20px;
      padding-left: 45px;

      .author-name {
        font-size: 12px;
        color: $primary-color;
        cursor: pointer;
      }

      > li {
        position: relative;
        margin-bottom: 8px;

        &:last-child {
          padding-bottom: 10px;
          margin-bottom: 0;

          &::after {
            display: none;
          }
        }

        &::after {
          position: absolute;
          top: 33px;
          bottom: -29px;
          left: -19px;
          display: block;
          width: 1px;
          background-color: #f0f0f0;
          content: '';
        }

        > .attitude {
          position: absolute;
          top: 10px;
          left: -26px;
          font-size: 16px;
          color: $primary-color;

          &.disagree {
            color: $danger;
          }
        }

        > .author-header {
          @include height(40);

          display: flex;
          align-items: center;

          > div {
            &:first-child {
              display: flex;
              flex: 1;
              align-items: center;

              > img {
                @include equalWH(30);

                cursor: pointer;
              }

              > .author-name,
              > .small-gray-text,
              > b {
                margin-left: 10px;
              }

              > .create-date {
                margin-left: 24px;
              }

              > .comment-log {
                @include wh(56, 24, 1, 1);

                margin-left: 14px;
                font-size: 12px;
                background-color: #fff;
                border: 1px solid #e4e4e4;

                > .syIcon {
                  font-size: 12px;
                }
              }
            }

            > .comment-praise {
              margin-right: 10px;
              color: $c9;
            }
          }
        }

        > .comment-content {
          padding-left: 41px;
          font-weight: 400;
          color: #000;
          overflow-x: auto;

          > .small-gray-text {
            margin-top: 2px;
            margin-bottom: 10px;

            > .create-date {
              margin-right: 20px;
            }
          }
        }

        .reply-wrapper {
          margin-top: 9px;

          > li {
            padding: 10px 20px;
            background-color: rgba(228, 231, 237, 0.5);

            > .reply-author-header {
              display: flex;
              margin-bottom: 8px;
              justify-content: space-between;

              > .create-date {
                color: $c9;
              }

              + div {
                > .comment-reply {
                  float: right;
                  margin-top: 2px;
                  margin-right: 9px;
                }
              }
            }

            &:first-child {
              ~ li {
                position: relative;

                &::after {
                  position: absolute;
                  top: -1px;
                  right: 0;
                  left: 10px;
                  display: block;
                  height: 1px;
                  background-color: rgba(217, 217, 217, 0.5);
                  content: '';
                }
              }
            }
          }
        }
      }
    }

    .textarea-comment {
      margin-top: 10px;
      margin-left: 41px;
    }
  }
</style>
<style lang="scss">
  .comment-content {
    th,
    td {
      border: 1px solid #000;
    }
  }
</style>
